<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
    <h2>人员列表3</h2>
    <input type="text" placeholder="输入用户名关键字" v-model="keyword">
    <button @click="sortType=1">升序</button>
    <button @click="sortType=2">降序</button>
    <button @click="sortType=0">原序</button>
    <ul>
      <li v-for="p in filterPersons" :key="p.id">
        {{p.name}}--{{p.age}}--{{p.gender}}
      </li>
    </ul>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el: "#test",
      data: {
        sortType: 0, // 排序类型: 0: 原序 1: 升序 2: 降序
        keyword: '', // 输入关键字
        persons: [ // 总人员数组
          { id: '001', name: '马冬梅', age: 21, gender: '女' },
          { id: '002', name: '周冬雨', age: 19, gender: '女' },
          { id: '003', name: '周杰伦', age: 20, gender: '男' },
          { id: '004', name: '帅邓伦', age: 22, gender: '男' },
        ],
        filterPersons: [] // 用于显示的过滤和排序后的列表
      },

      watch: {
        // 监视sortType
        sortType () { // watch的简写
          this.updateFilterPerons()
        },

        // 监视keyword
        keyword: {
          handler () {
            this.updateFilterPersons()
          },
          immediate: true, // 初始化立即执行
        }
      },

      methods: {
        // 根据keyword和sortType对要显示的filterPersons进行更新
        updateFilterPersons() {
          console.log(this)
          // 根据最新的keyword值, 对persons进行过滤产生一个新数组, 并给filterPersons
          const arr = this.persons.filter(p => p.name.includes(this.keyword))
          // 进行排序
          if (this.sortType!=0) {
            arr.sort((p1, p2) => { // 如果返回值大于0, p2在左边
              if (this.sortType==2) {
                return p2.age - p1.age
              } else {
                return p1.age - p2.age
              }
            })
          }
          // 更新要显示的列表
          this.filterPersons = arr
        }
      }
    })
  </script>
</body>
</html>